<template>
  <el-carousel class="carousel" :interval="3000" height="500px">
    <el-carousel-item class="carousel-item" v-for="item in 5" :key="item">
      <el-image class="carousel-item-img" fit="cover" :src="'src/assets/img/foodimg/' + item + '.jpg'" />
    </el-carousel-item>
  </el-carousel>
  <!-- 表格 -->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="foodId" label="ID" />
    <el-table-column prop="foodName" label="菜品名" />
    <el-table-column prop="foodType" label="品类" />
    <el-table-column prop="foodPrice" label="价格" />
    <el-table-column prop="foodImg" label="图片" />

    <el-table-column v-if="currentUser.role">
      <template #default="scope">
        <el-button type="primary" :icon="Edit" size="large" @click="showModifyDialog(scope.row)">
          修改
        </el-button>
        <el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row)">
          <template #reference>
            <el-button type="danger" :icon="DeleteFilled">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
    <el-table-column v-else>
      <template #default="scope">
        <el-button type="primary" size="large" @click="showDialog(scope.row)">
          预定
        </el-button>
      </template>

   
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination @update:current-page="updateCurrentPage" @update:page-size="updatePageSize"
    layout="sizes, prev, pager, next, jumper" :page-size="pageSize" :page-count="pageCount" :current-page="currentPage"
    :page-sizes="[10, 20, 50, 100]" :hide-on-single-page="false" />

  <!-- 预定菜品表单 -->

  <el-dialog v-model="dialogFormVisible" title="购买菜品">
    <el-form :model="form" label-width="140px">
      <el-form-item label="菜品名">
        <el-input v-model="form.foodName" autocomplete="off" disabled />
      </el-form-item>

      <el-form-item label="菜品类型">
        <el-input v-model="form.foodType" autocomplete="off" disabled />
      </el-form-item>

      <el-form-item label="菜品价格">
        <el-input v-model="form.foodPrice" autocomplete="off" disabled />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="showInsideDialog()">
          去付款
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 修改菜品表单 -->
  <el-dialog v-model="modifyDialogVisble" title="修改菜品">
    <el-form :model="modifyForm" label-width="140px">
      <el-form-item label="菜品名">
        <el-input v-model="modifyForm.foodName" autocomplete="off" />
      </el-form-item>

      <el-form-item label="菜品类型">
        <el-input v-model="modifyForm.foodType" autocomplete="off" />
      </el-form-item>

      <el-form-item label="菜品价格">
        <el-input v-model="modifyForm.foodPrice" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="modifyDialogVisble = false">取消</el-button>
        <el-button type="primary" @click="modifySubmitFood()">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>


</template>


<script  setup lang="ts">
import type { FoodType } from '@/types/index'
import { getFoodPageList, modifyFood, deleteFood } from '@/api/index'
import { onMounted, ref, reactive } from 'vue'
import currentUserStore from '@/stores/currentUserStore'
import { ElMessage } from 'element-plus'
import { DeleteFilled, Edit } from '@element-plus/icons-vue';

//获取当前用户
const currentUser = currentUserStore().currentUser
//表格数据设置为食物类型
const tableData = ref<FoodType[]>([])
//分页配置
const pageSize = ref(10)
const pageCount = ref(1)
const currentPage = ref(1)
//获取到当前页面的改动，使之成为新值
const updateCurrentPage = (val: number) => {
  currentPage.value = val
  getList()
}
//获取到当前页面大小的改动，使之成为新值
const updatePageSize = (val: number) => {
  pageSize.value = val
  getList()
}
//以分页类型获取食物列表
const getList = () => {
  getFoodPageList(currentPage.value, pageSize.value).then(((res: any) => {
    if (res.code == 200) {
      tableData.value = res.data.records
      pageCount.value = res.data.pages
    }
  }))
}
//对话框可见性（小）
const dialogFormVisible = ref(false)
//展现对话框（大）
const showDialog = (row: FoodType) => {
  dialogFormVisible.value = true
  //将此行的数据传入表单中
  form.foodName = row.foodName!
  //！断言row.roomName是非空数据
  form.foodType = row.foodType!
  form.foodPrice = row.foodPrice!
  form.foodImg = row.foodImg!
}
//对象一般使用reactive
const form = reactive({
  foodName: '',
  foodType: '',
  foodPrice: 0,
  foodImg: '',
})
//堂食

//对话框可见性
const InsideDialogVisible = ref(false)

const showInsideDialog = () => {
  //唤出对话框
  InsideDialogVisible.value = true
}

//修改の对话框可见性
const modifyDialogVisble = ref(false)
//修改の表单
const modifyForm = ref<FoodType>({})

const showModifyDialog = (food: FoodType) => {
  modifyDialogVisble.value = true
  modifyForm.value = { ...food }
}

//提交改好的数据
const modifySubmitFood = () => {
  modifyFood(modifyForm.value).then((res: any) => {
    if (res.code == 200) {
      ElMessage.success(res.msg)
      modifyDialogVisble.value = false
      getList()
    }
  })
}
//删除一条食物数据
const handleDelete = (food: FoodType) => {
  deleteFood(food.foodId!).then((res: any) => {
    if (res.code == 200) {
      ElMessage.success(res.msg)
      getList()
    }
  })
}



onMounted(() => {
  console.log(currentUser.role)
  getList()
})
</script>

  
<style scoped>

</style>
  